<template>
  <div @click=" bottlesFun" class="bottles" ref="bottles">
    <svg t="1651167376077" class="icon" viewBox="0 0 1024 1024" version="1.1"
      xmlns="http://www.w3.org/2000/svg" p-id="8816" xmlns:xlink="http://www.w3.org/1999/xlink"
      width="80"
      height="80"
    >
      <defs>
        <style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
        </style>
      </defs>
      <path d="M691.3 509.3c-0.1-0.5-0.2-1-0.3-1.6-0.1-0.3-0.1-0.5-0.2-0.8l-0.3-1.5c-0.1-0.3-0.1-0.5-0.2-0.8-0.1-0.5-0.3-1-0.4-1.5-0.1-0.3-0.2-0.5-0.3-0.8-0.1-0.5-0.3-0.9-0.4-1.4-0.1-0.3-0.2-0.5-0.3-0.8-0.2-0.4-0.3-0.9-0.5-1.3-0.1-0.3-0.3-0.6-0.4-0.9-0.2-0.4-0.3-0.8-0.5-1.2-0.1-0.3-0.3-0.6-0.5-0.9-0.2-0.4-0.3-0.7-0.5-1.1-0.2-0.3-0.4-0.7-0.5-1-0.2-0.3-0.3-0.6-0.5-1s-0.4-0.7-0.6-1.1c-0.2-0.3-0.3-0.6-0.5-0.9-0.2-0.4-0.5-0.7-0.7-1.1-0.2-0.3-0.3-0.5-0.5-0.8-0.3-0.4-0.6-0.8-0.8-1.1-0.2-0.2-0.3-0.4-0.5-0.6-0.3-0.4-0.6-0.8-1-1.1-0.2-0.2-0.3-0.4-0.5-0.6-0.4-0.4-0.7-0.8-1.1-1.2l-0.4-0.4-1.2-1.2-0.4-0.4c-0.4-0.4-0.9-0.8-1.3-1.2l-0.3-0.3c-0.2-0.1-0.3-0.3-0.5-0.4l-1.2-0.9-77.7-59.3-124.8-95.2h-0.8c-16.9-0.3-33.7 7.5-44.6 21.9l-15.6 20.4 0.1 0.1c4.4 3.3 5.2 9.6 1.9 14-2 2.6-4.9 3.9-8 3.9-2.1 0-4.2-0.7-6.1-2l-0.1-0.1-47.7 62.9 67 51c4.4 3.3 5.2 9.6 1.9 14-2 2.6-4.9 3.9-8 3.9-2.1 0-4.2-0.7-6.1-2l-67-51-47.7 62.5 67 51c4.4 3.3 5.2 9.6 1.9 14-2 2.6-4.9 3.9-8 3.9-2.1 0-4.2-0.7-6.1-2l-67-51-47.5 62.5 22.6 17.3H624l58.4-76.6c7.4-9.7 10.6-21.6 9-33.4 0-0.3-0.1-0.5-0.1-0.8z m-212.1-76.7c-2 2.6-4.9 3.9-8 3.9-2.1 0-4.2-0.7-6.1-2L445 419.2c-4.4-3.3-5.2-9.6-1.9-14 3.3-4.4 9.6-5.2 14-1.9l20.1 15.3c4.5 3.4 5.4 9.6 2 14zM180.4 673.2c-0.1 0.3-0.2 0.7-0.3 1 0.1-0.3 0.2-0.6 0.3-1zM180.5 673c1.9-5 4.6-9.8 8-14.3l29.3-38.6h2.8l-1.8-1.4-30.5 40c-3.3 4.5-5.9 9.3-7.8 14.3zM180.1 710.5c-2-6-3.1-12.4-3-18.8-0.1 6.4 0.9 12.8 3 18.8zM711.7 512.8c0.8 15.3-3.9 30.4-13.4 42.9l-49.1 64.5h54.4L495.9 892.9c-18.5 24.4-53.4 29.3-78.1 10.5l-13.7-10.5h-0.2l14 10.7c24.5 18.7 59.4 13.8 77.9-10.5l237.5-311.6c9.3-12.2 12.8-26.9 10.9-40.9-2.1-14-9.1-27.3-20.9-36.6-0.9 0.1-1.8 0.2-2.8 0.2-2.7 2.8-5.6 5.7-8.8 8.6z" fill="#FDD4DC" p-id="8817"></path>
      <path d="M495.9 892.9l207.7-272.8h-54.4L460.8 867.2c-10.6 13.9-26 22.9-43.3 25.2-3 0.4-6 0.6-9 0.6-1.5 0-2.9-0.1-4.4-0.2l13.7 10.5c24.7 18.9 59.6 14 78.1-10.4z" fill="#EBA2AD" p-id="8818"></path>
      <path d="M298 653.9c4.4 3.3 5.2 9.6 1.9 14-2 2.6-4.9 3.9-8 3.9-2.1 0-4.2-0.7-6.1-2l-65.2-49.7h-2.8l-29.3 38.6c-3.5 4.4-6.1 9.3-8 14.3 0 0.1-0.1 0.2-0.1 0.3-0.1 0.3-0.2 0.7-0.3 1-2 5.7-3 11.6-3.1 17.5-0.1 6.4 1 12.8 3.1 18.8L381 863.7c9.7 7.4 21.7 10.6 33.8 8.9 12-1.6 22.7-7.9 30.1-17.5l179.1-235H253.7l44.3 33.8z" fill="#EBA2AD" p-id="8819"></path>
      <path d="M727.2 187.6c-12.1-9.4-26-11.3-40-7.2-0.8 0.9-1.5 1.8-2.2 2.7l-0.4 0.6-0.3 0.3c-15.8 20.6-40.9 30.3-65.6 25.4-38.9-7.8-79.6-1.4-113.8 17.6l1.8 1.4 0.1 0.1h0.3l236.1 179.9 5.6 4.3c9.3-38.5 4.8-79.5-12.9-114.4v-0.1c-10.9-21.8-8.8-47.3 5.4-67.3v-0.7l2.1-2.7c1.7-2.2 3.2-4.5 4.5-6.8-2.4-13-10-25-20.7-33.1z" fill="#B0E0E6" p-id="8820"></path>
      <path d="M753.6 289.2c-8-16.1-6-34.4 5.4-48.9l2.1-2.7v-0.8c9.9-14.2 14.4-31.3 12.2-47.3-1.9-14.5-9.1-27.1-20.2-35.6-12.2-9.3-27.8-12.5-44-9.1-15.4 3.3-29.5 12.3-39.7 25.5l-0.3 0.3-0.4 0.6c-11.3 15-28.6 21.9-46.2 18.4-46.5-9.4-95.4-0.5-135.3 24.4-7-3.8-14.9-5.4-22.7-4.3-9.9 1.3-18.8 6.6-25 14.8l-13.9 18.2c-9 11.9-10.3 27.2-3.8 39.8-0.2 0.3-0.3 0.6-0.5 0.9-18.1 1.5-35.1 10.8-46.4 25.6l-21.1 28-216.3 283.8c-21.9 28.8-16.4 70 12.4 91.9l219 166.9c10.3 7.9 22.4 12.4 35 13.3h0.2c1.5 0.1 2.9 0.2 4.4 0.2 3 0 6-0.2 9-0.6 17.3-2.4 32.7-11.3 43.3-25.2l188.4-247.1 49.1-64.5c9.5-12.5 14.2-27.5 13.4-42.9 3.2-2.9 6.1-5.7 8.8-8.6 0.9 0 1.8-0.1 2.8-0.2 9.9-1 19-6.2 25.6-14.8l13.9-18.2c9.7-12.7 10.3-29.7 2.2-42.5 14.3-46.2 10.2-96.7-11.4-139.3z m-40.2-124.7c10.3-2.2 20.2-0.3 27.7 5.4 6.9 5.3 11.3 13 12.5 22.3 1.2 9.4-0.9 19.4-5.9 28.4-1.3 2.3-2.8 4.6-4.5 6.8l-2.1 2.7v0.7c-14.2 20.1-16.3 45.6-5.4 67.3v0.1c17.7 35 22.2 75.9 12.9 114.4l-5.6-4.3-235.9-179.8h-0.3l-0.1-0.1-1.8-1.4c34.2-19 74.9-25.5 113.8-17.6 24.7 4.9 49.8-4.9 65.6-25.4l0.3-0.3 0.4-0.6c0.7-0.9 1.4-1.8 2.2-2.7 7.1-8.2 16.3-13.8 26.2-15.9z m-31 379L624 620.1l-179.1 235c-7.4 9.7-18.1 15.9-30.1 17.5-12.1 1.7-24.1-1.5-33.8-8.9L180.1 710.6l-0.1-0.1-18-13.7c-20-15.2-23.8-43.9-8.6-63.9l30.9-40.5 34.6 26.4 1.8 1.4 65.2 49.7c1.8 1.4 3.9 2 6.1 2 3 0 6-1.4 8-3.9 3.3-4.4 2.5-10.7-1.9-14l-44.3-33.8-22.8-17.4-34.6-26.4 47.7-62.5 34.6 26.4 67 51c1.8 1.4 3.9 2 6.1 2 3 0 6-1.4 8-3.9 3.3-4.4 2.5-10.7-1.9-14l-67-51-34.6-26.4 47.7-62.5 34.6 26.4 67 51c1.8 1.4 3.9 2 6.1 2 3 0 6-1.4 8-3.9 3.3-4.4 2.5-10.7-1.9-14l-67-51-34.8-26.4 47.7-62.5 34.6 26.4 0.1 0.1c1.8 1.4 3.9 2 6.1 2 3 0 6-1.4 8-3.9 3.3-4.4 2.5-10.7-1.9-14l-0.1-0.1-34.6-26.4 15.1-19.9c8.6-11.2 21.8-17.9 35.6-17.9h3.2c0.5 0 1 0.1 1.5 0.1h0.4c0.5 0 0.9 0.1 1.4 0.1 0.2 0 0.3 0 0.5 0.1 0.4 0.1 0.9 0.1 1.3 0.2 0.1 0 0.3 0.1 0.4 0.1 0.5 0.1 0.9 0.2 1.4 0.3 0.1 0 0.2 0 0.3 0.1l1.5 0.3c0.1 0 0.2 0.1 0.3 0.1 0.5 0.1 1 0.3 1.5 0.4 0.2 0 0.3 0.1 0.5 0.1 0.4 0.1 0.9 0.3 1.3 0.4 0.1 0 0.3 0.1 0.4 0.1 0.4 0.2 0.9 0.3 1.3 0.5 0.1 0.1 0.3 0.1 0.4 0.2 0.4 0.2 0.9 0.3 1.3 0.5 0.1 0.1 0.3 0.1 0.4 0.2l1.2 0.6c0.2 0.1 0.3 0.2 0.5 0.3 0.4 0.2 0.8 0.4 1.1 0.6 0.2 0.1 0.3 0.2 0.5 0.3 0.4 0.2 0.7 0.4 1.1 0.6 0.2 0.1 0.4 0.2 0.6 0.4 0.3 0.2 0.7 0.4 1 0.6 0.2 0.1 0.4 0.3 0.7 0.4l0.9 0.6c0.2 0.2 0.5 0.3 0.7 0.5 0.3 0.2 0.5 0.4 0.8 0.6l16.5 12.6 124.8 95.2 77.7 59.3 1.2 0.9c0.2 0.1 0.3 0.3 0.5 0.4l0.3 0.3c0.4 0.4 0.9 0.8 1.3 1.2l0.4 0.4 1.2 1.2 0.4 0.4c0.4 0.4 0.7 0.8 1.1 1.2 0.2 0.2 0.3 0.4 0.5 0.6 0.3 0.4 0.6 0.8 1 1.1 0.2 0.2 0.3 0.4 0.5 0.6 0.3 0.4 0.6 0.7 0.8 1.1 0.2 0.2 0.3 0.5 0.5 0.8 0.2 0.4 0.5 0.7 0.7 1.1 0.2 0.3 0.3 0.6 0.5 0.9 0.2 0.3 0.4 0.7 0.6 1.1 0.2 0.3 0.3 0.6 0.5 1 0.2 0.3 0.4 0.7 0.5 1 0.2 0.4 0.3 0.7 0.5 1.1 0.2 0.3 0.3 0.6 0.5 0.9 0.2 0.4 0.3 0.8 0.5 1.2 0.1 0.3 0.3 0.6 0.4 0.9 0.2 0.4 0.3 0.9 0.5 1.3 0.1 0.3 0.2 0.5 0.3 0.8 0.2 0.5 0.3 0.9 0.4 1.4 0.1 0.3 0.2 0.5 0.3 0.8 0.1 0.5 0.3 1 0.4 1.5 0.1 0.3 0.1 0.5 0.2 0.8l0.3 1.5c0.1 0.3 0.1 0.5 0.2 0.8 0.1 0.5 0.2 1 0.3 1.6 0 0.2 0.1 0.5 0.1 0.7 1.6 11.6-1.6 23.4-9 33.1z m64.5-84.6L733 477.1c-3.3 4.3-8 6.9-12.8 7.1l-3.2-0.2c-0.7 0-1.3-0.1-1.9-0.2-0.3-0.1-0.7-0.2-1.3-0.4-1.1-0.5-2.1-0.9-2.9-1.3l-3.7-2.2-15.9-11.9-5.4-4.1-77.4-59L505.3 326l-0.3-0.3-60.1-45.8-0.2-0.2c-0.2-0.2-0.7-0.5-1.1-0.9-0.5-0.5-1-1-1.4-1.5l-0.2-0.3-0.4-0.6c-0.1-0.2-0.2-0.3-0.4-0.5l-0.7-1c-3.8-6.1-3.4-13.9 1.1-19.9l13.9-18.2c3-4 7.2-6.5 11.7-7.1 4.6-0.6 9.2 0.7 13 3.7l1.2 0.8 15.8 12.1 2.7 2.1h0.3L730.7 424l12.6 9.9 0.6 0.4c0.1 0.1 0.3 0.2 0.4 0.4l0.1 0.1 0.4 0.4c0.1 0.1 0.2 0.2 0.3 0.4 0.1 0.1 0.1 0.2 0.2 0.3 0.1 0.2 0.3 0.3 0.4 0.5 0.1 0.1 0.1 0.2 0.2 0.2l1.6 2c4.3 5.9 4.1 14.2-0.6 20.3z" p-id="8821"></path>
      <path d="M477.4 418.6l-20.1-15.3c-4.4-3.3-10.7-2.5-14 1.9-3.3 4.4-2.5 10.7 1.9 14l20.1 15.3c1.8 1.4 3.9 2 6.1 2 3 0 6-1.4 8-3.9 3.2-4.4 2.3-10.6-2-14z" p-id="8822"></path>
      <animateTransform
        attributeName="transform"
        attributeType="XML"
        type="translate"
        :from="boxwidth-80" to="-80" dur="5s"
        repeatCount="indefinite">
      </animateTransform>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :width="boxwidth" height="200">
      <g fill="rgba(26,148,188,1)">
        <path d="M 0 70 Q 75 39, 150 70 T 300 70 T 450 70 T 600 70 T 750 70 V 100 H 0 V 0"></path>
        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0"
          :to="-300" dur="1.5s" repeatCount="indefinite"></animateTransform>
      </g>
      <g fill="rgba(26,148,188,0.15)">
        <path d="M 0 70 Q 87.5 47, 175 70 T 350 70 T 525 70 T 700 70 T 875 70 T 1050 70 V 100 H 0 V 0"></path>
        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0"
          :to="-350" dur="3s" repeatCount="indefinite"></animateTransform>
      </g>
      <g fill="rgba(26,148,188,0.18)" transform="translate(-903.868 0)">
        <path d="M 0 70 Q 135 36, 270 70 T 540 70 T 810 70 T 1080 70 V 100 H 0 V 0" transform="translate(-38.232284367796474, 0)"></path>
        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0"
          :to="-540" dur="2s" repeatCount="indefinite"></animateTransform>
      </g>
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      boxwidth: '0',
    };
  },
  created() {
    console.log();
    this.$nextTick(() => {
      this.boxwidth = this.$refs.bottles.offsetWidth;
    });
  },
  methods: {
    bottlesFun() {
      this.$notify({
        title: '来自火星的漂流瓶',
        message: '我爱你，不问归期',
        duration: 0,
      });
    },
  },

};
</script>

<style scoped lang="scss">
.bottles{
  width: 100%;
  height: 8rem;
  position: relative;
  overflow: hidden;
  svg{
    position:absolute;
  }
}
</style>
